import styles from "./index.module.scss";
import dayjs from "dayjs";
import Icon from "@/components/icon";
import { ArtComment } from "@/types/data";
import { http } from "@/utils/http";
import { useState } from "react";
import { likeComment } from "@/store/actions/article";
import { useDispatch } from "react-redux";
interface Props {
  comment: ArtComment;
  loadDdata: Function;
}

export default function ReplyItem({ comment, loadDdata }: Props) {
  let dispatch = useDispatch();
  const onLike = async (id: string, is_liking: boolean) => {
    await dispatch(likeComment(id, is_liking) as any);
    loadDdata();
  };
  return (
    <div
      style={{
        position: "relative",
        marginTop: 10,
        padding: 10,
      }}
    >
      <div style={{}}>
        <div className="author">
          <div className={styles.avatar}>
            <img
              style={{
                width: "9.07vw",
                height: "9.07vw",
                borderRadius: "50%",
                verticalAlign: "middle",
              }}
              src={comment.aut_photo}
              alt=""
            />
            <span>{comment.aut_name}</span>
          </div>
          <div style={{ position: "absolute", right: 14, top: 16 }}>
            <span style={{ display: "inline-block", marginRight: 5 }}>
              {comment.like_count}
            </span>
            <Icon
              type={comment.is_liking ? "iconbtn_like_sel" : "iconbtn_like2"}
              onClick={() => onLike(comment.com_id, comment.is_liking)}
            />
          </div>
        </div>
      </div>
      <div style={{ marginLeft: "36px" }}>{comment.content}</div>
    </div>
  );
}
